<template>
    <div class="box">
        <div class="top"></div>

        <div class="left">
            <div class="ltop">
                <div class="title">
                    <TitleVue title="监控情况 - - - -"></TitleVue>
                </div>
                <jiankVue></jiankVue>
               
            </div>
            <div class="lcenter">
                <div class="title">
                    <TitleVue title="门禁情况 - - - -"></TitleVue>
                </div>

                <div style="width: 100%;height: 80%;">
                    <menjinVue></menjinVue>
                </div>
                
            </div>

            <div class="lbot">
                 <div class="title">
                    <TitleVue title="值班情况 - - - -"></TitleVue>
                </div>

                <zhibanVue></zhibanVue>
            </div>
        </div>

        <div class="center">
            <!-- <aaaaa></aaaaa> -->
            <footernav class="footernav"></footernav>
        </div>

        <div class="right">
            <div class="rtop">
                <div style="width: 100%;height: 30px;">
                    <TitleVue title="监控画面 - - - -" class="rbtitle">
                        <template v-slot="prop">
                            <div class="brotateTitle">{{ prop.title }}</div>
                        </template>
                    </TitleVue>
                </div>

                <div style="width: 100%;display: flex;flex-direction: column;justify-content: space-around;">
                    <p style="margin-top: 5px;">
                        <img src="../assets/images/daww.png" style="width: 380px;" />
                    </p>
                    <p style="margin-top: 5px;">
                        <img src="../assets/images/daww.png" style="width: 380px;" />
                    </p>
                    <p style="margin-top: 5px;">
                        <img src="../assets/images/daww.png" style="width: 380px;" />
                    </p>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import footernav from '../components/footernav.vue';
import TitleVue from '../components/Title/index.vue'

import jiankVue from '../components/jiank.vue';
import zhibanVue from '../components/zhiban.vue';
import menjinVue from '../components/menjin.vue';
import aaaaa from '../components/aaaaa.vue';

</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    background: url("../assets/images/pageBg.png") no-repeat 0 0/100% 100%;
    color: #fff;

    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: url('../assets/images/Top.png') no-repeat 0 0 / 100% 100%;

    }

    .left {
        width: 30%;
        height: 100%;
        background: url('../assets/images/Left.png') no-repeat 0 0 / 100% 100%;

        .ltop {
            margin: 60px 60px 10px 50px;
            height: 32vh;
            border: 1px solid red;

            .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
                // padding-left: 10px;
            }
        }

        .lcenter {
            margin: 2px 60px 3px 50px;
            height: 20vh;
            border: 1px solid red;
              .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
            
                // padding-left: 10px;
            }
        }

        .lbot {
            margin: 2px 60px 10px 50px;
            height: 32vh;
            border: 1px solid red;

             .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
                
                // padding-left: 10px;
            }
        }
    }

    .center {
        flex: 1;

        .footernav {
            width: 50%;
            height: 75px;
            position: absolute;
            bottom: 5vh;
            left: 25%;
        }
    }

    .right {
        width: 30%;
        height: 100%;
        background: url('../assets/images/Right.png') no-repeat 0 0 / 100% 100%;

        .rtop {
            margin: 80px 60px 30px 50px;
            height: 90vh;
            border: 1px solid red;
             .rbtitle {
                transform: rotateY(180deg);

                .brotateTitle {
                    transform: rotateY(-180deg);
                    padding-left: 20px;
                    padding-top: 10px;
                    font-size: 19px;
                    font-weight: bold;
                }
            }
        }


    }
}
</style>